<!-- components/navigation/NotificationBadge.vue -->
<template>
  <div class="notification-badge" @click="showNotifications">
    <el-badge :value="unreadCount" :max="99" :hidden="unreadCount === 0">
      <el-button class="notification-btn" :icon="Bell" circle />
    </el-badge>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref, computed } from 'vue'
import { useAppStore } from '@/stores/appStore'
import { Bell } from '@element-plus/icons-vue'

const appStore = useAppStore()

// 计算属性
const unreadCount = computed(() => appStore.unreadCount)

// 方法
const showNotifications = () => {
  console.log('显示通知')
  // 这里可以打开通知面板或跳转到通知页面
}
</script>

<style scoped>
.notification-badge {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.notification-btn {
  background: var(--header-bg, #ffffff);
  color: var(--header-text, #262626);
  border: 1px solid var(--border-color, #dcdfe6);
  transition: all 0.3s ease;
}

.notification-btn:hover {
  background: var(--user-dropdown-hover, #f5f5f5);
  color: var(--primary-color, #409eff);
  border-color: var(--primary-color, #409eff);
}
</style>